<template>
    <el-dialog 
        :title="type=='add' ? '新增' : '编辑'" 
        :model-value="visible"
        :destroy-on-close="true"
        width="900px"
        :before-close="onCancel"
        :close-on-click-modal="false"
    >
        <!-- fullscreen -->
        <el-form v-loading="loading" class="form form_height noScrollbar" ref="form"  :rules="rules" :model="form"  label-width="150px" label-position="right">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="配件名称:" prop="partsName">
                  <el-input class="width100" v-model="form.partsName"  clearable placeholder="请输入配件名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="品牌:" prop="brand">
                  <el-input class="width100" v-model="form.brand"  clearable placeholder="请输入品牌"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="型号:" prop="model">
                  <el-input class="width100" v-model="form.model"  clearable placeholder="请输入型号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数量:" prop="nums">
                  <!-- <el-input class="width100" v-model="form.nums"  clearable placeholder="请输入数量"></el-input> -->
                  <el-input-number class="width100" v-model="form.nums" :min="0" :max="10000000" label="请输入数量"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog_footer">
                <el-button type="primary" @click="onSave()" :loading="loading">保 存</el-button>
                <el-button @click="onCancel">取 消</el-button>
            </span>
        </template>
        
    </el-dialog>
</template>
<script>
import abcApi from '@/api/parts'
import commonApi from '@/api/index'
import {formatTimestamp} from '@/utils/common'
// import uploadFile from '@/components/upload/uploadFile'

export default {
    emits: ['onChange'],
    components:{
        // uploadFile
    },
    props:{
        visible:{
            default:false,
            type: Boolean
        },
        type:{
            default:'add',
            type: String
        },
        tabsName:{
            default:'0',
            type: String
        },
        id:{
            default:'',
        }
    },
    watch:{
        visible(newValue){
            if(newValue){
                this.$nextTick(()=>{
                    this.$refs['form'].resetFields()
                })
                
                if(this.type == 'edit'){
                    this.loading = true
                    abcApi.findById(
                        this.id
                    ).then((res)=>{
                        this.loading = false
                        this.form = res.data
                        
                    }).catch((err)=>{
                        this.loading = false
                    })
                }
            }else{
                this.$refs['form'].resetFields()
                Object.assign(this.$data,this.$options.data())
            }
        }
    },
    data(){
        return {
            loading:false,
            form:{
                files:[]
            },
            rules:{
                eventName: [
                    { required: true, message: '请输入事件名称', trigger: ['change','blur'], }
                ],
                eventContent: [
                    { required: true, message: '请输入事件内容', trigger: ['change','blur'], }
                ],
                eventAddr: [
                    { required: true, message: '请输入事件地点', trigger: ['change','blur'], }
                ],
                eventType: [
                    { required: true, message: '请选择事件类型', trigger: ['change','blur'], }
                ],
                eventTime: [
                    { required: true, message: '请选择事件时间', trigger: ['change','blur'], }
                ],
                
            },
            // 下拉
            typeList0:[{name:'长沙市',id:1}],
            typeList1:[{name:'开福区',id:2}],
            typeList2:[{name:'芙蓉北路街道',id:'001'}],
            
        }
    },
    methods:{
       
        onSave(){
            
            this.$refs['form'].validate((valid) => {
                if (valid) {
                  var api = this.type == 'add' ? abcApi.save : abcApi.update
                  this.loading = true
                    
                  api({
                      ...this.form
                  }).then((res)=>{
                      this.loading = false
                      this.$emit('onChange',{bool:false,refresh:true})
                      this.$message.success(res.message ||'提交成功')
                  }).catch((err)=>{
                      this.loading = false
                      this.$message.error(err.message||err.data.message)
                  })
                } else {
                    return false
                }
            })
        },

       
        onCancel(){
            this.$emit('onChange',{bool:false})
        },
        // 表格
        
        
    },
}
</script>
<style lang="scss" scoped>
    .form_height{
        max-height: 80vh;
        overflow-y: auto;
        // padding-bottom: 80px;
    }
    .width100{
        width: 100%;
    }
    .dialog_footer{
      display: flex;
      justify-content: center;
      // position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      padding: 20px 0;
      z-index: 1;
    }
    ::v-deep .tree_select .el-tree-node__content{
      height: 38px;
    }

</style>

